<template>
  <div class="box">
    <!-- 头部资产类型分析开始 -->
    <div class="box_head">
      <div class="box_hand_content">
        <span>资产总数<strong>{{useStatus.assetCount}}</strong>
          <span>在用数<strong>{{useStatus.zyStatus}}</strong></span>
          <span>借用数<strong>{{useStatus.wjStatus}}</strong></span>
          <span>维修数<strong>{{useStatus.wxStatus}}</strong></span>
          <span>闲置数<strong>{{useStatus.xzStatus}}</strong></span>
        </span>
      </div>
    </div>
    <!-- 头部资产类型分析结束 -->
    <!-- 头部资产类型主题开始 -->
    <div class="box_content">
      <el-table border :data="showTypeList">
        <el-table-column label="资产类型" prop="typeName"></el-table-column>
        <el-table-column label="商品总数" prop="number"></el-table-column>
        <el-table-column label="商品总额(元)" prop="totalMoney"></el-table-column>
        <el-table-column label="在用数" prop="useNumber"></el-table-column>
        <el-table-column label="借用数" prop="borrowNumber"></el-table-column>
        <el-table-column label="维修数" prop="maintainNumber"></el-table-column>
        <el-table-column label="闲置数" prop="idleNumber"></el-table-column>
      </el-table>
    </div>
    <!-- 头部资产类型主题结束 -->
  </div>
</template>

<script>
  import {
    assetCount,
    getUseStatus,
    assetCounts,
    assetPriceSum,
    selectType,
    selectAssetList,
    getListAll,
    summaryStatuslist
  } from "@/api/eam-wx/asset"
  import {
    listType,
    getType,
    delType,
    addType,
    updateType,
    selectTypeList
  } from "@/api/eam-wx/type";
  import {
    indexOf
  } from "zrender/lib/core/util";
  export default {
    name: '',
    data() {
      return {
        key: '',
        // 主体映射集合
        useStatus: {
          zyStatus: '',
          xzStatus: '',
          wjStatus: '',
          assetCount: '',
          assetPriceSum: '',
          wxStatus:''
        },
        typeList: [],
        assetList: [],
        showTypeList: [],
        summaryStatuslist:[],
      }
    },
    components: {

    },
    props: [],
    mounted() {
      this.getList();
      this.getAssetAll();
      this.getTypeList()
    },
    created() {
      this.getAssetCounts()
      this.getAssetZyUseStatus();
      this.getAssetXzUseStatus();
      this.getAssetWjUseStatus();
      this.getAssetWxUseStatus();
    },
    methods: {
      /** 查询资产类型列表 */
      getList() {
        this.loading = true;
        listType(this.queryParams).then(response => {
          //console.log(JSON.stringify(response))
          //this.typeList = this.handleTree(response.rows, "typeId");
        });
      },
      getAssetAll() {
        this.loading = true;
        getListAll().then(response => {
          this.showTypeList.forEach((obj) => {
            response.rows.forEach((item) => {
              if (obj.typeId == item.eamType.typeId) {
                const index = this.showTypeList.findIndex(function(object) {
                  return object.typeId === obj.typeId;
                });
                if (item.useStatus == 100) {
                  this.showTypeList[index].useNumber = this.showTypeList[index].useNumber + item.assetNum;
                }
                if (item.useStatus == 4) {
                  this.showTypeList[index].idleNumber = this.showTypeList[index].idleNumber + item.assetNum;
                }
                if (item.useStatus == 101) {
                  this.showTypeList[index].borrowNumber = this.showTypeList[index].borrowNumber + item
                    .assetNum;
                }
                if (item.useStatus == 103) {
                  this.showTypeList[index].maintainNumber = this.showTypeList[index].maintainNumber + item
                    .assetNum;
                }
                this.showTypeList[index].typeName = obj.typeName;
                this.showTypeList[index].typeId = obj.typeId;
                this.showTypeList[index].number = this.showTypeList[index].number + item.assetNum;
                this.showTypeList[index].totalMoney = this.showTypeList[index].totalMoney + item.assetNum *
                  item.price
              }
            })
          })
        });
      },
      getTypeList() {
        selectTypeList().then(res => {
          console.log(JSON.stringify(res.rows))
          res.rows.forEach((item) => {
            let obj = {};
            obj.typeName = item.typeName;
            obj.typeId = item.typeId;
            obj.number = 0;
            obj.totalMoney = 0;
            obj.useNumber = 0;
            obj.idleNumber = 0;
            obj.borrowNumber = 0;
            obj.maintainNumber = 0;
            this.showTypeList.push(obj);
          })
        })
      },
      getAssetZyUseStatus() { //在用资产数量
        let useStatus = 100;
        getUseStatus(useStatus).then(res => {
          this.useStatus.zyStatus = res.data;
        })
      },
      getAssetXzUseStatus() { //闲置资产数量
        let useStatus = 4;
        getUseStatus(useStatus).then(res => {
          this.useStatus.xzStatus = res.data;
        })
      },
      getAssetWjUseStatus() { //外借资产数量
        let useStatus = 101;
        getUseStatus(useStatus).then(res => {
          this.useStatus.wjStatus = res.data;
        })
      },
      getAssetWxUseStatus() { //维修资产数量
        let useStatus = 103;
        getUseStatus(useStatus).then(res => {
          this.useStatus.wxStatus = res.data;
        })
      },
      getAssetCounts() { //资产总数量
        assetCounts().then(res => {
          this.useStatus.assetCount = res.data;
          //alert(JSON.stringify(res))
        })
      },

    }
  }
</script>

<style scoped>
  .box {
    width: 100%;
    height: 700px;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
  }

  .box_head {
    width: 98%;
    height: 50px;
    align-items: center;
    margin-top: 10px;
    margin-left: 12px;
    background-color: white;
  }

  .box_hand_content {
    margin-right: -15px;
  }

  .box_hand_content span {
    margin-left: 70px;
    line-height: 50px;
    font-size: 12px;

  }

  .box_hand_content span strong {
    color: blue;
    font-size: 20px;
    margin-left: 5px;
  }

  .box_content {
    width: 98%;
    height: 80%;
    margin-left: 12px;
    margin-top: 12px;
  }

  .el-table-column {
    border: 2px solid yellow;
  }
</style>
